<template>
	<view class="page-index">
		<!-- #ifdef MP -->
		<view class="mp-header">
			<view class="sys-head" view :style="{ height: statusBarHeight }"></view>
			<view class="serch-box" view style="height: 43px;">
				<view class="serch-wrapper" :style="drive == 'IOS' ? 'line-height: 43px;text-align: center;font-weight: bold;font-size: 34rpx;' : 'line-height: 43px;font-size: 34rpx;'">
					品牌库
				</view>
			</view>
		</view>
		<!-- #endif -->
		<!-- 首页展示 -->
		<view class="page_content" :style="{marginTop:mpHeight+'px'}">
			<view style="position: relative;margin: 20rpx 100rpx 0 100rpx;">
				<image v-if="touchIndex" :src="imgUrls" style="width: 270rpx;height: 110rpx;"></image>
				<image v-else :src="imgUrl" style="width: 325rpx;height: 90rpx;"></image>
				<navigator hover-class="none" url="/pages/columnGoods/goods_search/index" style="line-height: 44rpx;width: 350rpx;border-radius: 30rpx;background: #F7F8F8;padding: 0 20rpx;margin-top: 25rpx;">
					<text style="font-size: 22rpx;color: #b1b1b1;">查找产品/品牌</text>
					<image src="../../static/images/sousuo.png" style="float: right;width: 32rpx;height: 32rpx;margin-right: 4rpx;margin-top: 8rpx;"></image>
				</navigator>
				<view v-if="!touchIndex" style="margin-top: 25rpx;font-size: 30rpx;font-weight: bold;">潮品尖货</view>
			</view>
			<view v-if="touchIndex" style="margin: 50rpx 80rpx;font-size: 20rpx;">
				<view style="text-align: center;">
					<view style="width: 70rpx;border-top: 1px solid #282828;display: inline-block;margin: 0 20rpx 6rpx 0;"></view>
					为你推荐
					<view style="width: 70rpx;border-top: 1px solid #282828;display: inline-block;margin: 0 0 6rpx 20rpx;"></view>
				</view>
				<navigator v-for="(item,index) in brand_t" :key="index" v-if="index < 3" :url="'/pages/store/home/index?id='+item.mer_id" hover-class="none" style="margin: 50rpx 20rpx;float: left;color: #d3d2d2;">
					<view style="width: 156rpx;height: 120rpx;padding: 0 18rpx;">
						<image :src="item.mer_avatar" style="width: 120rpx;height: 120rpx;" mode="aspectFit"></image>
					</view>
					<view style="width: 156rpx;height: 60rpx;line-height: 60rpx;text-align: center;margin-top: -8rpx;" class="line1">{{item.mer_name}}</view>
				</navigator>
				<view style="text-align: center;">
					<view style="width: 70rpx;border-top: 1px solid #282828;display: inline-block;margin: 0 20rpx 6rpx 0;"></view>
					品牌集中营
					<view style="width: 70rpx;border-top: 1px solid #282828;display: inline-block;margin: 0 0 6rpx 20rpx;"></view>
				</view>
				<view style="margin: 50rpx 20rpx;color: #d3d2d2;">
					<navigator v-for="(item,index) in brand" :key="index" :url="'/pages/store/home/index?id='+item.mer_id" hover-class="none" style="height: 102rpx;line-height: 102rpx;border-bottom: 1px solid #d3d2d2;">
						<image :src="item.mer_avatar" style="width: 100rpx;height: 100rpx;float: left;" mode="aspectFit"></image>
						<view style="width: 170rpx;float: left;margin-left: 60rpx;" class="line1">{{item.mer_name}}</view>
						<view style="width: 200rpx;float: right;" class="line1">{{item.mer_info}}</view>
					</navigator>
				</view>
			</view>
			<view v-else style="margin: 60rpx 80rpx;font-size: 22rpx;">
				<navigator v-for="(item,index) in category" :key="index" :url="'/pages/columnGoods/goods_list/index?id='+item.store_category_id+'&title='+item.cate_name" hover-class="none" style="margin: 30rpx 20rpx;float: left;">
					<image :src="item.pic" style="width: 156rpx;height: 156rpx;" mode="aspectFill"></image>
					<view style="height: 60rpx;line-height: 60rpx;text-align: center;background: #f5f3f2;margin-top: -8rpx;
					border-bottom-left-radius: 20rpx;border-bottom-right-radius: 20rpx;" class="line1">{{item.cate_name}}</view>
				</navigator>
				<view style="clear: both;"></view>
			</view>
		</view>
		<!-- #ifdef MP -->
		<view style="width: 60rpx;height: 60rpx;border-radius: 50%;background: #fff;position: fixed;top: 254rpx;right: 50rpx;">
			<image v-if="touchIndex" src="../../static/images/3_1.png" style="width: 60rpx;height: 60rpx;" @click="touchName"></image>
			<image v-else src="../../static/images/3.png" style="width: 60rpx;height: 60rpx;" @click="touchName"></image>
		</view>
		<!-- #endif -->
		<!-- #ifndef MP -->
		<view style="width: 60rpx;height: 60rpx;border-radius: 50%;background: #fff;position: fixed;top: 138rpx;right: 50rpx;">
			<image v-if="touchIndex" src="../../static/images/3_1.png" style="width: 60rpx;height: 60rpx;" @click="touchName"></image>
			<image v-else src="../../static/images/3.png" style="width: 60rpx;height: 60rpx;" @click="touchName"></image>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	var sysInfo = uni.getSystemInfoSync();
	var statusBarHeight = sysInfo.statusBarHeight + 'px';
	let app = getApp();
	import {
		getCategoryList
	} from '@/api/store.js';
	export default {
		data() {
			return {
				touchIndex: false,
				navlist: [],
				productList: [],
				navActive: 0,
				number: "",
				height: 0,
				hightArr: [],
				toView: "",
				winHeight: 0,
				pidIndex: 0,
				intoindex: "",
				imgUrl: '',
				imgUrls: '',
				category: [],
				brand: [],
				brand_t: [],
				statusBarHeight: statusBarHeight,
				mpHeight: 0,
				drive: sysInfo.system.indexOf('iOS') != -1 ? 'IOS' : ''
			}
		},
		onLoad(options) {
			let that = this
			uni.getSystemInfo({
				success: function(res) {
					that.winHeight = res.windowHeight
				},
			});
			// #ifdef H5
			console.log(this.$route)
			document.body.addEventListener('touchmove', function(event) {
				if (that.$route.path == '/pages/goods_cate/goods_cate') {
					event.preventDefault();
				}
			}, {
				passive: false
			});
			// #endif
		},
		onShow() {
			if (!this.productList.length) {
				this.getAllCategory();
			}
		},
		onHide() {},
		//点击底部tabbar调用
		onTabItemTap() {
			this.getAllCategory();
		},
		onReady() {
			let self = this
			// #ifdef MP
			setTimeout(res => {
				let info = uni.createSelectorQuery().select(".mp-header");
				info.boundingClientRect(function(data) { //data - 各种参数
					self.mpHeight = data.height
				}).exec()
			}, 800)
			// #endif
		},
		methods: {
			touchName: function() {
				if(this.touchIndex) {
					this.touchIndex = false;
				} else{
					this.touchIndex = true;
				}
			},
			infoScroll: function() {
				let that = this;
				let len = that.productList.length;
				//this.number = that.productList[len - 1].children.length;
				//设置商品列表高度
				uni.getSystemInfo({
					success: function(res) {
						that.height = (res.windowHeight) * (750 / res.windowWidth) - 98;
					},
				});
			},
			tap: function(index, id) {
				this.toView = id;
				this.navActive = index;
			},
			getAllCategory: function() {
				let that = this;
				let value = ""
				getCategoryList().then(res => {
					that.brand = res.data.brand;
					that.brand_t = res.data.brand_t;
					that.category = res.data.category;
					that.imgUrl = res.data.cate_top_img;
					that.imgUrls = res.data.cate_top_img_br;
					that.productList = res.data;
					// that.getCateFrom(that.productList)
					that.tap(that.pidIndex, 'b' + that.pidIndex)
					that.infoScroll()
					that.intoindex = ""
					uni.removeStorageSync('storeIndex')
				})
			},
			//获取首页分类来源
			getCateFrom: function(arr) {
				let pid = uni.getStorageSync('storeIndex')
				let i = ""
				arr.map((item, index) => {
					if (item.store_category_id == pid) {
						this.pidIndex = index
						i = 'sort' + index
						// this.intoindex = 'sort'+index
						return;
					}
				})
				this.$nextTick(() => {
					this.intoindex = i
				})

			},
			scroll: function(e) {
				let scrollTop = e.detail.scrollTop;
				let scrollArr = this.hightArr;
				for (let i = 0; i < scrollArr.length; i++) {
					if (scrollTop >= 0 && scrollTop < scrollArr[1] - scrollArr[0]) {
						this.navActive = 0
					} else if (scrollTop >= scrollArr[i] - scrollArr[0] && scrollTop < scrollArr[i + 1] - scrollArr[0]) {
						this.navActive = i
					} else if (scrollTop >= scrollArr[scrollArr.length - 1] - scrollArr[0]) {
						this.navActive = scrollArr.length - 1
					}
				}
			},
			searchSubmitValue: function(e) {
				if (this.$util.trim(e.detail.value).length > 0)
					uni.navigateTo({
						url: '/pages/columnGoods/goods_list/index?searchValue=' + e.detail.value
					})
				else
					return this.$util.Tips({
						title: '请填写要搜索的产品信息'
					});
			},
		}
	}
</script>
<style>
	page {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #fff;
	}
</style>
<style lang="scss">
	.page-index {
		display: flex;
		flex-direction: column;
		min-height: 100%;
		/* #ifdef MP */
		.mp-header {
			z-index: 999;
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			/* #ifdef H5 */
			padding-bottom: 20rpx;
			/* #endif */
			// background: linear-gradient(90deg, $bg-star 50%, $bg-end 100%);
			background-color: #fff;

			.serch-wrapper {
				height: 100%;
				align-items: center;
				padding: 0 50rpx 0 53rpx;

				image {
					width: 118rpx;
					height: 42rpx;
					margin-right: 30rpx;
				}
				.input,.uninput {
					display: flex;
					align-items: center;
					width: 305rpx;
					height: 58rpx;
					padding: 0 0 0 30rpx;
					background: rgba(247, 247, 247, 1);
					border: 1px solid rgba(241, 241, 241, 1);
					border-radius: 29rpx;
					color: #BBBBBB;
					font-size: 28rpx;
					
					.iconfont {
						margin-right: 20rpx;
					}
					
				}
				.uninput{
					min-width: 460rpx;
					max-width: 480rpx;
				}
				
			}
		}

		/* #endif */

		.page_content {

			/* #ifdef MP */
			margin-top: 270rpx;

			/* #endif */
		}
	}
</style>

